<template>
  <atom-bottom-sheet
    :value="isShow"
    @cancel="$emit('updateIsShow', false)"
    @click-overlay="$emit('updateIsShow', false)"
    @confirm="confirm"
    title="提醒方式"
    closeable
    :bottom-btns="[{ type: 'confirm', btnType: 'primary', text: '确定' }]"
    style="height: 6.5rem"
  >
    <atom-checkbox-group :value="pushTypeArr" @input="updatePushTypeArr">
      <atom-cell-group>
        <atom-cell title="电脑客户端" clickable>
          <template #right-icon>
            <atom-checkbox :name="1" ref="checkboxes" />
          </template>
        </atom-cell>
        <atom-cell title="手机App" clickable>
          <template #right-icon>
            <atom-checkbox :name="2" ref="checkboxes" />
          </template>
        </atom-cell>
        <atom-cell clickable>
          <template #title>
            <div class="title-slot-wrapper">
              <span class="title">手机短信</span>
              <span class="sub-title">受运营商影响，可能存在延迟</span>
            </div>
          </template>
          <template #right-icon>
            <atom-checkbox :name="3" ref="checkboxes" />
          </template>
        </atom-cell>
      </atom-cell-group>
    </atom-checkbox-group>
  </atom-bottom-sheet>
</template>

<script>
import { reqSubInfo, setSub } from '@/apis/pool.api.js';
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    gpcId: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      pushTypeArr: [],
    };
  },
  methods: {
    updatePushTypeArr(pushTypeArr) {
      const phoneNum = 2;
      const messageNum =3;
      const filterPushTypeArr = pushTypeArr.filter(item => [phoneNum, messageNum].includes(item));
      if (filterPushTypeArr.length > 1) {
        this.$toast('手机App/手机短信提醒仅可选择一项');
      } else {
        this.pushTypeArr = pushTypeArr;
      }
    },
    async getSubInfo() {
      try {
        const res = await reqSubInfo({ gpc_id: this.gpcId });
        if (res.status_code) {
          throw new Error(`SubScribePopup.vue的reqSubInfo接口的status_code异常:${res.status_code}`);
        }
        this.pushTypeArr = [];
        res.data.push_channel.forEach(item => {
          this.pushTypeArr.push(item.push_type);
        });
      } catch (error) {
        _t.errorReport({...error});
      }
    },
    async confirm() {
      try {
        const pushType = this.pushTypeArr.join(',');
        // 调用接口更改提醒方式
        const res = await setSub({
          gpc_id: this.gpcId,
          push_type: pushType,
        });
        if (res.status_code) {
          this.$toast('更改提醒方式失败');
          throw new Error(`SubScribePopup.vue的setSub接口的status_code异常:${res.status_code}`);
        }

        // 关闭弹窗
        if (pushType) {
          this.$emit('updateIsShow', false, true);
          this.$toast('订阅成功');
        } else {
          this.$emit('updateIsShow', false, false);
        }
        // 接口响应之后提醒父组件更新订阅信息
        const isSub = this.pushTypeArr.length;
        this.$emit('updateSubscribe', isSub);
      } catch (error) {
        _t.errorReport({...error});
      }
    },
  },
  watch: {
    isShow: {
      handler(nval) {
        if (nval) {
          this.getSubInfo();
        }else{
          this.pushTypeArr = [];
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.title-slot-wrapper {
  .title {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: var(--text-1);
    line-height: 20px;
    font-weight: 400;
  }
  .sub-title {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: var(--text-3);
    line-height: 20px;
    font-weight: 400;
    margin-left: 6px;
  }
}
</style>
<style lang="less">
[theme-mode='black'] {
  .atom-cell {
    background-color: #2b2b2b !important;
  }
}
</style>
